<template>
  <div class="time-container">
    <div>
      <span>{{ currentTime }}</span>
    </div>
    <div>
      <span class="second-style">{{ figure }}</span
      >秒后更新
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { onUnmounted, ref, defineEmits, onMounted } from 'vue'

const emits = defineEmits(['getSystemInfoAndSensorInfo'])
const figure = ref(8)
const currentTime = ref(dayjs().format('YYYY/MM/DD HH:mm:ss'))

const time = setInterval(() => {
  currentTime.value = dayjs().format('YYYY/MM/DD HH:mm:ss')
  figure.value--
  if (figure.value === 0) {
    // 发起请求获取最新数据
    emits('getSystemInfoAndSensorInfo')
    figure.value = 8
  }
}, 1000)

onUnmounted(() => {
  clearInterval(time)
})
</script>

<style lang="scss" scoped>
.time-container {
  .second-style {
    color: #409eff;
    font-weight: 600;
    margin-right: 5px;
  }
  display: flex;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
}
</style>
